import React, { useEffect } from 'react';
import { StyleSheet, View, Image } from 'react-native';
import { Button } from 'react-native-paper';
import { router } from 'expo-router';
import { useAuth } from '@/contexts/AuthContext';
import { ThemedView } from '@/components/ThemedView';
import { ThemedText } from '@/components/ThemedText';
import { Colors } from '@/constants/Colors';
import { useColorScheme } from '@/hooks/useColorScheme';

export default function CompleteScreen() {
  const colorScheme = useColorScheme();
  const { userToken } = useAuth();
  const tintColor = Colors[colorScheme ?? 'light'].tint;

  // 如果用户未登录，重定向到登录页面
  useEffect(() => {
    if (!userToken) {
      router.replace('/auth/login');
    }
  }, [userToken]);

  // 导航到主页
  const goToHome = () => {
    router.replace('/(tabs)');
  };

  return (
    <ThemedView style={styles.container}>
      <View style={styles.content}>
        <View style={styles.animationContainer}>
          {/* 使用静态图标或图片 */}
          <View style={[styles.successIcon, { backgroundColor: tintColor }]}>
            <ThemedText style={styles.checkmark}>✓</ThemedText>
          </View>
        </View>

        <ThemedText style={styles.title}>设置完成！</ThemedText>
        
        <ThemedText style={styles.message}>
          恭喜您完成了个人资料设置！现在您可以开始寻找合适的匹配对象了。
        </ThemedText>
        
        <ThemedText style={styles.subMessage}>
          您随时可以在个人资料页面修改您的信息和偏好设置。
        </ThemedText>

        <View style={styles.buttonContainer}>
          <Button
            mode="contained"
            onPress={goToHome}
            style={styles.button}
            labelStyle={styles.buttonText}
            theme={{ roundness: 10 }}
          >
            开始探索
          </Button>
        </View>
      </View>
    </ThemedView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  content: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 20,
  },
  animationContainer: {
    width: 200,
    height: 200,
    marginBottom: 30,
    justifyContent: 'center',
    alignItems: 'center',
  },
  successIcon: {
    width: 120,
    height: 120,
    borderRadius: 60,
    justifyContent: 'center',
    alignItems: 'center',
  },
  checkmark: {
    fontSize: 80,
    fontWeight: 'bold',
    color: 'white',
  },
  title: {
    fontSize: 28,
    fontWeight: 'bold',
    marginBottom: 20,
    textAlign: 'center',
  },
  message: {
    fontSize: 18,
    textAlign: 'center',
    marginBottom: 15,
    paddingHorizontal: 20,
  },
  subMessage: {
    fontSize: 16,
    textAlign: 'center',
    opacity: 0.7,
    marginBottom: 40,
    paddingHorizontal: 20,
  },
  buttonContainer: {
    width: '100%',
    paddingHorizontal: 40,
  },
  button: {
    paddingVertical: 8,
  },
  buttonText: {
    fontSize: 18,
    fontWeight: 'bold',
  },
});
